<style>
  @import "css/base.css";
</style>

<section id="todoapp">
  <header id="header">
    <h1>todos</h1>
    <input
      id="new-todo"
      placeholder="What needs to be done?"
      autofocus
      #newtodo
      (keyup.enter)="enterTodo(newtodo)"
    />
  </header>

  <section id="main">
    <input id="toggle-all" type="checkbox" (click)="toggleAll($event)" />
    <label for="toggle-all">Mark all as complete</label>

    <ul id="todo-list">
      <li *ngFor="let todo of todoStore.list">
        <div class="view" [class.hidden]="todoEdit == todo">
          <input
            class="toggle"
            type="checkbox"
            (click)="completeMe(todo)"
            [checked]="todo.completed"
          />

          <label (dblclick)="editTodo(todo)">{{todo.title}}</label>
          <button class="destroy" (click)="deleteMe(todo)"></button>
        </div>

        <div>
          <input
            class="edit"
            [class.visible]="todoEdit == todo"
            [value]="todo.title"
            (keyup)="doneEditing($event, todo)"
          />
        </div>
      </li>
    </ul>
  </section>

  <footer id="footer">
    <span id="todo-count"></span>
    <div [class.hidden]="true"></div>
    <ul id="filters">
      <li>
        <a href="#/" class="selected">All</a>
      </li>
      <li>
        <a href="#/active">Active</a>
      </li>
      <li>
        <a href="#/completed">Completed</a>
      </li>
    </ul>
    <button id="clear-completed" (click)="clearCompleted()">Clear completed</button>
  </footer>
</section>

<footer id="info">
  <p>Double-click to edit a todo</p>
  <p>Created by <a href="https://x.com/angular">The Angular Team</a></p>
</footer>
